<template>
  <div class="container">
    <div class="title">{{ blogInfo.title }}</div>
    <div class="info">
      &nbsp;&nbsp;<el-tag effect="dark" round type="warning">作者</el-tag>&nbsp;
      <div class="author" @click="toUserDetail">{{ blogInfo.nickName }}</div>
      &nbsp;&nbsp;<el-tag effect="dark" round type="success">分类</el-tag>&nbsp;
      <div class="category" @click="toCategoryDetail">
        {{ blogInfo.categoryName }}
      </div>
      <div class="time">&nbsp;&nbsp;于{{ blogInfo.createTime }}发布</div>
    </div>
    <div class="content">
      <el-scrollbar>
        <div v-html="blogInfo.content"></div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css";
import bus from "../utils/EventBus";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

const blogId = ref(route.params.blogId);

onMounted(() => {
  getBlogDetail();
});

const blogInfo = ref({});
const getBlogDetail = async () => {
  let result = await proxy.Request({
    url: "/view/getBlogDetail",
    params: {
      blogId: blogId.value,
    },
  });
  if (!result) {
    return;
  }
  blogInfo.value = result.data;
  nextTick(() => {
    let blocks = document.querySelectorAll("pre code");
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
  console.log(result.data);
};

const toCategoryDetail = () => {
  router.push("../category/" + blogInfo.value.categoryId);
  bus.emit("toCategory");
};

const toUserDetail = () => {
  router.push("../user/" + blogInfo.value.userId);
  bus.emit("toUser");
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 10px 24px;
  min-width: 630px;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 #ddd;
  border-radius: 10px;

  .title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 28px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: -o-ellipsis-lastline;
  }

  .info {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(221, 221, 221, 0.568);
    border-radius: 10px;
    cursor: default;

    .author,
    .category {
      color: #79bbff;
      cursor: pointer;
    }

    .time {
      opacity: 0.5;
    }
  }

  .content {
    margin-top: 10px;
    height: calc(100vh - 265px);
  }
}
</style>